import styles from './StatHeader.module.scss'
import {Button, Input, InputRef, message, Popover, QRCode, Space, Tooltip, Typography} from "antd";
import {useNavigate, useParams} from "react-router-dom";
import {CopyOutlined, LeftOutlined, QrcodeOutlined} from "@ant-design/icons";
import useGetPageInfo from "../../../hooks/useGetPageInfo";
import {useMemo, useRef} from "react";


const {Title} = Typography
export const StatHeader = () => {
    const nav = useNavigate();
    const {id} = useParams()
    const {title, isPublished} = useGetPageInfo()

    const urlInputRef = useRef<InputRef>(null)

    function copy() {
        const elem = urlInputRef.current;
        if (elem === null) return
        elem.select()
        document.execCommand('copy')
        message.success('复制成功').then(r => {
        })
    }

    // function genLinkAndQRCodeElem() {
    //     if (!isPublished) return null
    //
    //     const url = `http://localhost:3000/question/${id}`
    //     const QRCodeElem = (
    //         <div style={{textAlign: 'center'}}>
    //             <QRCode value={url} size={150}></QRCode>
    //         </div>
    //     )
    //     return <Space>
    //         <Input ref={urlInputRef} value={url} style={{width: 300}}></Input>
    //         <Tooltip title={'拷贝链接'}>
    //             <Button icon={<CopyOutlined/>} onClick={copy}></Button>
    //         </Tooltip>
    //         <Popover content={QRCodeElem}>
    //             <Button icon={<QrcodeOutlined/>}></Button>
    //         </Popover>
    //     </Space>
    // }

    const LinkAndQRCodeElem = useMemo(() => {
        if (!isPublished) return null

        const url = `http://localhost:3000/question/${id}`
        const QRCodeElem = (
            <div style={{textAlign: 'center'}}>
                <QRCode value={url} size={150}></QRCode>
            </div>
        )
        return <Space>
            <Input ref={urlInputRef} value={url} style={{width: 300}}></Input>
            <Tooltip title={'拷贝链接'}>
                <Button icon={<CopyOutlined/>} onClick={copy}></Button>
            </Tooltip>
            <Popover content={QRCodeElem}>
                <Button icon={<QrcodeOutlined/>}></Button>
            </Popover>
        </Space>
    }, [id, isPublished])
    return (
        <div className={styles['header-wrapper']}>
            <div className={styles.header}>
                <div className={styles.left}>
                    <Space>
                        <Button type={'link'} icon={<LeftOutlined/>} onClick={() => nav(-1)}>返回</Button>
                        <Title>{title}</Title>
                    </Space>
                </div>
                <div className={styles.main}>{LinkAndQRCodeElem}</div>
                <div className={styles.right}>
                    <Button type={'primary'} onClick={() => nav(`/question/edit/${id}`)}>编辑问卷</Button>
                </div>
            </div>
        </div>
    );
};